import React, { createElement, FC, useEffect, useState } from 'react';
import { BaseWrapper } from '../base';
import classNames from 'classnames';
import './fieldInputNumber.less';
import { generatorClass } from '../../utils';
import { useFormContainerSelector } from '../../form-container';
import { BaseFieldInputNumber } from './base-field-input-number';
import { useMemoizedFn } from 'ahooks';

export interface FieldInputNumberProps {
  min: string;
  max: number;
}

const useDestroyRender = () => {
  const [isExists, setExists] = useState(true);

  const destroyRender = useMemoizedFn(() => {
    setExists(false);
  });

  useEffect(() => {
    setExists(true);
  }, [isExists]);

  return {
    destroyRender,
    isExists,
  };
};
export const FieldInputNumber: FC<FieldInputNumberProps> = (props) => {
  const { columnConfig, onChange, value, ...otherProps } = props;

  const className = classNames(generatorClass('filed-input-number'));

  const { isExists, destroyRender } = useDestroyRender();
  const [readonly] = useFormContainerSelector((s) => [s.readonly]);

  return (
    <BaseWrapper {...props}>
      {isExists && (
        <BaseFieldInputNumber
          className={className}
          inputNumberProps={{
            disabled: readonly || columnConfig?.status === '2',
            placeholder: columnConfig?.placeholder,
          }}
          {...props}
          value={value}
          onChange={onChange}
        />
      )}
    </BaseWrapper>
  );
};
